<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../application/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text">
        <input type="text" disabled>
        <hr>
        <input type="text" :disabled="flag">
        <input type="button" value="切换" @click="flag=!flag">
        <hr>
        <input type="button" :value="name" :disabled="code" @click="startCode()">
        <hr>
        <input type="button" value="string" :disabled="str">
        <input type="button" value="number" :disabled="num">
        <input type="button" value="number" :disabled="arr">
        <input type="button" value="number" :disabled="obj">
        <input type="button" value="number" :disabled="null">
        <input type="button" value="number" :disabled="undefined">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                flag:true,
                name:"发送验证码",
                code:false,
                num:5,
                str:"asajjdkd",
                num:0,
                arr:[],
                obj:{},
                null:null,
                undefined:undefined
            },
            methods:{
                startCode(){
                    this.code=true;
                    this.name=this.name=="发送验证码"?this.num+"s后重发":"发送验证码";
                    var timer=setInterval(()=>{
                        this.num-=1;
                        this.name=this.num+"s后重发";
                        if(this.num<0){
                            this.code=false;
                            this.name="发送验证码",
                            this.num=5;
                            clearInterval(timer);
                        }
                    },1000)
                }
            }
        })
    </script>
</body>
</html>